<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        canvas{
            display: block;/*canvas是行内元素，设置成块元素就不会和图片一样需要对齐方式，也不会有滚动条等*/
        }
    </style>
</head>
<body>
<canvas id = "canvas"></canvas>
<script>
    /*
    * canvas动画效果 全屏动画效果
    * */
    //首先获取到canvas标签
    let canvas = document.querySelector("#canvas")

    //因为是全屏，所以需要根据浏览器宽高来设置
    window.onload = window.onresize = function (){ //只有设置了onload和onresize事件，canvas标签才会跟随着浏览器可视窗口的变化而变化
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
    }


    //并且开启canvas绘制环境
    let ctx = canvas.getContext("2d")

    //全局中设置变量
    let x = 100
    let y = 100

    //绘制矩形的函数
    function drawRect(){

        //设表先关
        ctx.clearRect(0,0,canvas.width,canvas.height) //先清除之前画的动画

        //绘制模块 清除完之前画的再进行这次绘画
        ctx.beginPath()
        ctx.rect(x,y,100,100)
        ctx.fill()

        //数据更新模块
        x += 3

        //关键帧回调
        requestAnimationFrame(drawRect) //关键帧回调，下一次调用的drawRect函数时，x的值已经更新了，就动起了
    }

    //执行绘制矩形函数
    drawRect()


</script>
</body>
</html>